<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>后台管理 - 易买网</title>
	<link type="text/css" rel="stylesheet" href="../css/style.css"/>
	<script type="text/javascript" src="../scripts/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="../scripts/function.js"></script>
	<!-- 后期引入   -->
	<script type="text/javascript" src="../plugins/axios/axios.min.js"></script>
	<script type="text/javascript" src="../scripts/request.js"></script>
	<link rel="stylesheet" href="../plugins/element-ui/element-ui.css">
	<style type="">
		.avatar-uploader .el-upload {
			border: 1px dashed #d9d9d9;
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
		}

		.avatar-uploader .el-upload:hover {
			border-color: #f67f35;
		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 120px;
			height: 120px;
			line-height: 120px;
			text-align: center;
		}

		.avatar {
			width: 120px;
			height: 120px;
			display: block;
		}
	</style>
</head>
<body>
<div id="app">
	<div id="header" class="wrap">
		<div id="logo"><img src="../images/logo.gif"/></div>
		<div class="help"><a href="../index.html">返回前台页面</a></div>
		<div class="navbar">
			<ul class="clearfix">
				<li><a href="index.html">首页</a></li>
				<li><a href="user.html">用户</a></li>
				<li class="current"><a href="product.html">商品</a></li>
				<li><a href="order.html">订单</a></li>
				<li><a href="guestbook.html">留言</a></li>
				<li><a href="news.html">新闻</a></li>
			</ul>
		</div>
	</div>
	<div id="childNav">
		<div class="welcome wrap">
			管理员{{ userId }}您好，今天是{{ time }}，欢迎回到管理后台。
		</div>
	</div>
	<div id="position" class="wrap">
		您现在的位置：<a href="index.html">易买网</a> &gt; 管理后台
	</div>
	<div id="main" class="wrap">
		<div id="menu-mng" class="lefter">
			<div class="box">
				<dl>
					<dt>用户管理</dt>
					<dd><a href="user.html">用户管理</a></dd>
					<dt>商品信息</dt>
					<dd><em><a href="productClass-add.html">新增</a></em><a href="productClass.html">分类管理</a></dd>
					<dd><em><a href="product-add.html">新增</a></em><a href="product.html">商品管理</a></dd>
					<dt>订单管理</dt>
					<dd><a href="order.html">订单管理</a></dd>
					<dt>留言管理</dt>
					<dd><a href="guestbook.html">留言管理</a></dd>
					<dt>新闻管理</dt>
					<dd><em><a href="news-add.html">新增</a></em><a href="news.html">新闻管理</a></dd>
				</dl>
			</div>
		</div>
		<div class="main">
			<h2 style="cursor: pointer" onclick="window.location.href='product.html'">添加商品</h2>
			<div class="manage">
				<form id="productAdd" action="#" @submit.prevent="addProduct">
					<table class="form">
						<tr>
							<td class="field">商品名称(*)：</td>
							<td><input type="text" class="text" name="productName"
									   v-model="product.name"/><span></span></td>
						</tr>
						<tr>
							<td class="field">描述：</td>
							<td><input type="text" class="text" name="productDetail" v-model="product.detail"/></td>
						</tr>
						<tr>
							<td class="field">所属分类：</td>
							<td>
								<el-cascader
										size="mini"
										v-model="subArr"
										:options="options">
								</el-cascader>
							</td>
						</tr>
						<tr>
							<td class="field">商品价格(*)：</td>
							<td><input type="text" class="text tiny" name="productPrice" v-model="product.price"/>
								元<span></span></td>
						</tr>

						<tr>
							<td class="field">库存(*)：</td>
							<td><input type="text" class="text tiny" name="productNumber"
									   v-model="product.number"/><span></span></td>
						</tr>
						<tr>
							<td class="field">商品图片(*)：</td>

							<td><!--<input type="file" class="text" name="photo" @change="handleFileChange">-->
								<el-upload
										accept="image/jpg,image/jpeg,image/png"
										class="avatar-uploader"
										action="/common/upload"
										:show-file-list="false"
										:on-success="handleAvatarSuccess"
										:before-upload="beforeAvatarUpload">
									<img v-if="imageUrl" :src="imageUrl" class="avatar">
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
								<span></span>
							</td>


						</tr>
						<tr>
							<td></td>
							<td><label class="ui-blue"><input type="submit" name="submit" value="确定"/></label></td>
						</tr>
					</table>
				</form>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<div id="footer">
		Copyright &copy; 2013 北大青鸟 All Rights Reserved. 京ICP证1000001号
	</div>
</div>
<script type="text/javascript" src="../plugins/vue/vue.js"></script>
<script type="text/javascript" src="../api/common.js"></script>
<script type="text/javascript" src="../api/parentCategories.js"></script>
<script type="text/javascript" src="../api/subCategories.js"></script>
<script type="text/javascript" src="../api/product.js"></script>
<script type="text/javascript" src="../plugins/element-ui/element-ui.js"></script>
<script type="application/javascript">
	axios.get("/user/getStatus")
	const app = new Vue({
		el: '#app',
		data: {
			loading: false,
			userId: getUserInfo().userId,
			time: getFormattedDate(),
			product: {
				subId: '',
				photo: ''
			},
			subArr: [],
			options: [],
			fileList:[],
			imageUrl: ''
		},
		async mounted() {
			await this.getList()
		},
		methods: {
			async getList() {
				const list = await getParentCategoryAllList()
				const parentCategoriesList = list.data;

				this.options = this.convertToElCascaderOptions(parentCategoriesList);

			},
			// 将数据转换为 el-cascader 所需格式的方法
			convertToElCascaderOptions(data) {
				return data.map(parent => {
					const children = parent.subCategories.map(child => {
						return {value: child.id, label: child.name};
					});
					return {value: parent.id, label: parent.name, children};
				});
			},
			async handleAvatarSuccess(resp, file) {
				console.log('上传成功，后端接口返回的数据：', resp);
				this.product.photo = resp.data
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			beforeAvatarUpload(file) {
				const isJPG = file.type === 'image/jpeg';
				const isPNG = file.type === 'image/png';
				const isLt2M = file.size / 1024 / 1024 < 2;

				if (!isJPG && !isPNG) {
					this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
				}
				if (!isLt2M) {
					this.$message.error('上传图片大小不能超过 2MB!');
				}

				if ((isJPG || isPNG) && isLt2M) {
					// 使用 FileReader 对象读取文件并生成 Data URL
					const reader = new FileReader();
					reader.onload = (e) => {
						console.log(e)
						this.imageUrl = e.target.result; // 设置图片预览的 Data URL
					};
					reader.readAsDataURL(file); // 读取文件并转换为 Data URL
					// 将文件添加到待上传列表中
					this.fileList.push(file);
					// 返回 false 阻止自动上传
					return false;
				}
				return false;
			},
			async addProduct() {
				this.loading = true
				setTimeout(async () => {
					if (document.querySelectorAll('.error').length > 0 || this.subArr.length === 0) {
						this.loading = false
						this.$message.error('添加失败，请核对准确信息!');
						return
					}
					this.product.subId = this.subArr[1]

					// 上传图片文件
					if (this.fileList.length > 0) {
						const formData = new FormData();
						formData.append('file', this.fileList[0]);

						// 手动上传文件
						const uploadResponse = await axios.post('/common/upload', formData, {
							headers: {
								'Content-Type': 'multipart/form-data'
							}
						});
						this.product.photo = uploadResponse.data;
					}


					const resp = await addProductApi(this.product)
					if (resp.code === 1) {
						this.$message({
							message: resp.data,
							type: 'success'
						});
						setTimeout(async => {
							window.location.href = 'product.html'
						}, 800)
					} else {
						this.$message.error('添加失败!');
					}
				}, 800)

			}
		}
	})
</script>

</body>
</html>
